<!--
 * @Author: 王灿
 * @Date: 2019-12-01 12:30:34
 * @LastEditTime: 2020-03-17 11:18:50
 * @Description: 优惠卷模板操作
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-coupon\coupon-template\template-operate\index.vue
 -->

<template>
  <div class="template-operate">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="couponName">
        <el-input v-model="ruleForm.couponName" placeholder="优惠卷名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="productId">
        <el-select
          v-model="ruleForm.productId"
          filterable
          remote
          reserve-keyword
          clearable
          placeholder="请绑定商品"
          :remote-method="onGetCommodity"
        >
          <el-option
            v-for="item in productList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item prop="userId">
        <el-select v-model="ruleForm.userId" filterable remote reserve-keyword clearable placeholder="请绑定用户" :remote-method="onGetCustomerList">
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item prop="amount">
        <el-input v-model="ruleForm.amount" placeholder="优惠卷金额" clearable></el-input>
      </el-form-item>
      <el-form-item prop="couponExplain">
        <el-input v-model="ruleForm.couponExplain" placeholder="优惠卷备注" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmitForm('ruleForm')">确 定</el-button>
      <el-button @click="onCancelForm('ruleForm')">取 消</el-button>
    </div>
  </div>
</template>
<script>
import {
  getProductList,
  getModularCreate,
  getModularUpdate
} from '@/api/commodity.js'
// import { getCustomerList } from '@/api/home.js'
export default {
  name: 'CouponOperate',
  props: {
    // 编辑默认数据
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 请求数据标记
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        id: '',
        couponName: '',
        amount: '',
        couponExplain: '',
        productId: ''
      },
      productList: [],
      userList: [],
      rules: {
        productId: [{ required: true, message: '请绑定商品', trigger: 'blur' }],
        couponExplain: [
          { required: true, message: '请输入优惠卷备注', trigger: 'blur' }
        ],
        couponName: [
          { required: true, message: '请输入优惠卷名称', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入优惠卷金额', trigger: 'blur' },
          { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '输入两位小数点', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    // 监听数据变化
    row() {
      this.onGetDefaultData()
    }
  },
  created() {
    this.onGetDefaultData()
  },
  methods: {
    // 获取所有商品
    onGetCommodity(query) {
      this.productList = []
      getProductList({
        name: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.name
          this.productList.push(params)
        })
      })
    },
    // 获取所有用户
    // onGetCustomerList(query) {
    //   this.userList = []
    //   getCustomerList({
    //     realName: query
    //   }).then(res => {
    //     res.data.list.forEach(item => {
    //       let params = {}
    //       params.value = item.userId
    //       params.label = item.realName
    //       this.userList.push(params)
    //     })
    //   })
    // },
    // 默认数据
    onGetDefaultData() {
      if (this.row) {
        this.ruleForm = {
          id: this.row.id,
          couponName: this.row.couponName,
          amount: this.row.amount,
          couponExplain: this.row.couponExplain,
          productId: this.row.productId
        }
        if (this.isShow) {
          this.onGetCommodity(this.row.productName)
          // this.onGetCustomerList(this.row.realName)
        }
      }
    },
    // 提交
    onSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (JSON.stringify(this.row) === '{}') {
            this.onAdd()
          } else {
            this.onEdit()
          }
        }
      })
    },
    // 取消
    onCancelForm(formName) {
      this.$refs[formName].resetFields()
      let data = { isShow: false }
      this.$emit('addTableRow', data)
    },
    // 新增优惠卷模板
    onAdd() {
      getModularCreate(this.ruleForm).then(res => {
        this.$notify.success({
          title: '提示',
          message: '新增成功'
        })
        this.onRefresh()
      })
    },
    // 编辑模板
    onEdit() {
      getModularUpdate(this.ruleForm).then(res => {
        this.$notify.success({
          title: '提示',
          message: '编辑成功'
        })
        this.onRefresh()
      })
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        // TODO
        this.$emit('onChangeRefresh')
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
.template-operate {
  .el-form {
    margin-top: 30px;
    .el-form-item {
      margin-bottom: 22px;
      .el-input {
        &.el-input--suffix {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
